<template>
  <aside id="Rside">
    <div class="logo">
      <img src="../assets/logo.gif">
    </div>
    <nav>
      <h2>推荐</h2>
      <ul>
        <li  v-for="item in list" v-bind:key="item.id" >
          <p @click="selectPage(item.id)">{{item.title | ellipsis}}</p>
          <time>{{item.last_time}}</time>
        </li>
      </ul>
  </nav>
    <br>
    <br>
  <nav>
    <h2>关于作者</h2>
    <ul>
      <li>
        <p class="author">&emsp;&emsp;一名运维工程师！主业是系统和数据库，写代码算是个人爱好吧！目前内容还很少主要是在画页面。以后会逐渐将内容充实</p>
      </li>
    </ul>
  </nav>
  </aside>
</template>

<script>
export default {
  name: 'Rside',
  data () {
    return {
      list: []
    }
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 40) {
        return value.slice(0, 40) + '...'
      }
      return value
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$axios.get(process.env.BASE_URL + 'wiki/getRecommendList/1').then((res) => {
        // console.log(res)
        this.list = res.data.data
      }, function (response) {
        console.log('error')
      })
    },
    selectPage (wikiId) {
      console.log('run selectPage')
      this.$router.push('/p/' + wikiId)
    }
  }
}
</script>

<style lang="less" scoped>
  aside {
    /*background: #fafafa;*/
    .logo{
      /*background: #fafafa;*/
    }
    nav {
      box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .12), 0 6px 20px 0 rgba(0, 0, 0, .14);
      text-align:left;
      /*margin: auto auto auto 8px;*/
      h2 {
        margin: 5px;
        color: #2c3e50;
      }
      ul {
        max-width: 85%;
        overflow: hidden;
        list-style: none;
        padding: 0 0px 0 8px;
        margin: 0 0;
        border-top: 1px solid #ffd100;
        li{
          min-height: 20px;
          text-align: left;
          padding: 5px 0 5px 0;
          border-bottom: 1px solid #f0f0f0;
          p{
            color: #2c3e50;
            cursor: pointer;
            margin: 5px 0;
          }
          time {
            font-size: 12px;
            color: #999999;
          }
        }
      }
    }
  }
</style>
<style scoped>
  .author{
    font-size: 14px;
    line-height: 1.75em;
  }
</style>
